<template>
    <div class="rank-warp item-warp">
        <div class="item-title">
            <h2>设备排名</h2>
            <a class="btn">
                <img src="../../assets/img/icon/icon_cup.png">
            </a>
        </div>
        <p class="subtitle">企业接入设备数量排名</p>
        <div v-if="dataList && dataList.length > 0">
          <ul class="lists" v-for="(item,index) in dataList" :key="index">
            <li>
              <i :class="`num${index+1}`"></i>
              <span class="list-title" :title="item.orgName">{{item.orgName}}</span>
              <span class="list-date">{{item.date}}</span>
              <span class="list-num">{{item.countNum}}台</span>
            </li>
          </ul>
        </div>
        <div class="rank" v-else>
          <img :src="rank" alt="">
        </div>
    </div>
</template>

<script>
    import {getDeviceRankData} from "@/api/apiList";
    import rank from '@/assets/img/bg/img.png'
    export default {
        name: "deviceRank",
        data:() => ({
          dataList:[],
          rank
        }),

      created() {
        this.getDeviceRankData();
      },

      methods: {
        /**
         * 设备排名-企业接入设备数量排名
         */
        getDeviceRankData() {
          getDeviceRankData({}).then( res => {
            this.dataList = res.data.data ? res.data.data : [];
          });
        }
      },
    }
</script>

<style scoped type="text/less" lang="less">
    .rank-warp{
        flex: 1;
        background-image: url("../../assets/img/bg/bg_k05.png");
        background-size: 100% 100%;
        .subtitle{
            color: @wordColor1;
            font-size: 12px;
            line-height: 26px;
        }
        .rank {
          height: 180px;
          width: 80%;
          margin-top: 20px;
          margin-left: 50px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .lists{
            margin: 3px 0 0 8px;
            li {
                line-height: 36px;
                display: flex;
                i{
                    margin: 10px 10px 0 0;
                    display: inline-block;
                    width: 17px;
                    height: 17px;
                    background-size: 100%,100%;
                    background-repeat: no-repeat;
                    &.num1{
                        background-image: url("../../assets/img/icon/icon_num1.png");
                    }
                    &.num2{
                        background-image: url("../../assets/img/icon/icon_num2.png");
                    }
                    &.num3{
                        background-image: url("../../assets/img/icon/icon_num3.png");
                    }
                    &.num4{
                        background-image: url("../../assets/img/icon/icon_num4.png");
                    }
                    &.num5{
                        background-image: url("../../assets/img/icon/icon_num5.png");
                    }
                }
                span{
                    display: block;
                    font-size: 12px;
                    color: @wordColor1;
                    &.list-title{
                        width: 180px;
                        white-space:nowrap;
                        overflow: hidden;
                    }
                    &.list-date{
                        flex: 1;
                        text-align: center;
                    }
                    &.list-num{
                        width: 84px;
                        margin-left: auto;
                        text-align: center;
                    }
                }
            }
        }
    }
</style>
